import React, { Component } from "react";
import { GridList, GridListTile, Tooltip } from "@material-ui/core";
import {
  searchMilSymbolSetIcons,
  AffiliationKey,
  SchemaType,
  SchemaTypeKey,
  StatusKey,
} from "./milsymbolWrapper";

interface Props {
  symbolStatus:StatusKey;
  affiliation: AffiliationKey;
  schemaType: SchemaType;
  schemaKey: SchemaTypeKey;
  searchKeyword?: string;
  symbolOptions?: object;
  width?: number | string;
  iconSize?: number;
  cols?: number;
  onImgClick?:any;
}
interface State {
  mainIcons: object[];
  currentSymbol:any;
}

export default class MilsymbolGridList extends Component<Props, State> {
  static defaultProps = {
    symbolStatus: "C",
    affiliation: "F",
    schemaType: "EMS",
    schemaKey: "INCDNT",
    searchKeyword: "",
    symbolOptions: { size: 32 },
    width: 280,
    iconSize: 40,
    cols: 5,
  };
  state = {
    mainIcons: [],
    currentSymbol:{}
  };
  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
  constructor(props: Readonly<Props>) {
    super(props);
  }
  UNSAFE_componentWillMount() {
    const {
      symbolStatus,
      affiliation,
      schemaType,
      schemaKey,
      searchKeyword,
      symbolOptions,
    } = this.props;
    // const mainIcons = searchMilSymbolSetIcons('F','WAR','S','COMBATANT');
    // const mainIcons =  searchMilSymbolSetIcons('F','EMS','INCDNT','FIRE');
    // const mainIcons =  searchMilSymbolSetIcons('F','EMS','INCDNT');
    // const mainIcons =  searchMilSymbolSetIcons('F','EMS','NATEVT');
    // const mainIcons =  searchMilSymbolSetIcons('F','WAR','S');
    // const mainIcons =  searchMilSymbolSetIcons('F','TACGRP','OTH');
    this.searchSymbols(
      symbolStatus,
      affiliation,
      schemaType,
      schemaKey,
      searchKeyword,
      symbolOptions
    );
  }
  private searchSymbols(
    symbolStatus: StatusKey,
    affiliation: AffiliationKey,
    schemaType: SchemaType,
    schemaKey: SchemaTypeKey,
    searchKeyword: string | undefined,
    symbolOptions: object | undefined
  ) {
    const mainIcons = searchMilSymbolSetIcons(
      symbolStatus,
      affiliation,
      schemaType,
      schemaKey,
      searchKeyword,
      symbolOptions
    );
    this.setState({ mainIcons });
  }

  UNSAFE_componentWillReceiveProps(newProps) {
    this.searchSymbols(
      newProps.symbolStatus,
      newProps.affiliation,
      newProps.schemaType,
      newProps.schemaKey,
      newProps.searchKeyword,
      newProps.symbolOptions
    );
  }

  imgMouseOverHandle = (e) => {
    e.target.style.background = 'blue';
  };
  imgMouseOutHandle = (e,item) => {    
    const {currentSymbol} = this.state;
    // @ts-ignore
    e.target.style.background = item.sidc === currentSymbol.sidc ? 'blue': '';
  };

  render() {
    const { mainIcons,currentSymbol } = this.state;
    const { width, iconSize, cols, onImgClick } = this.props;
    return (
      <GridList
        style={{ width: width }}
        cellHeight={iconSize}
        spacing={8}
        cols={cols}
      >
        {mainIcons.map((item,index) => {
          // @ts-ignore
          const label = item.label;
          // @ts-ignore
          const url = item.svgDataURL;
          return (
            <GridListTile key={`GridListTile${index}`}>
              <Tooltip title={label}>
              <img src={url} width={iconSize} height={iconSize} alt="" 
                    // @ts-ignore 
                    style={{background: item.sidc === currentSymbol.sidc?'blue':''}} onClick={(event) =>{this.setState({currentSymbol:item});onImgClick(event,item)}} onMouseOver={event=>this.imgMouseOverHandle(event)} onMouseOut={event=>this.imgMouseOutHandle(event,item)}/>             
              </Tooltip>
            </GridListTile>
          );
        })}
      </GridList>
    );
  }
}
